<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset='utf-8'>
  <link href="../css/zui.min.css" rel="stylesheet">
  <link href="../css/example.css" rel="stylesheet">

  <script src="../../assets/jquery.js"></script>
  <script src="../../dist/js/zui.min.js"></script>






  <script src="../assets/js/example.js"></script>
</head>
<body>
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">ZUI</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span id="navbarCurrent">examples</span> <b class="caret"></b></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="alerts.html">alerts</a></li>
            <li><a href="article.html">article</a></li>
            <li><a href="breadcrumb.html">breadcrumb</a></li>
            <li><a href="button-groups.html">button-groups</a></li>
            <li><a href="buttons.html">buttons</a></li>
            <li><a href="cards.html">cards</a></li>
            <li><a href="carousel.html">carousel</a></li>
            <li><a href="chosen.html">chosen</a></li>
            <li><a href="collapse.html">collapse</a></li>
            <li><a href="colorset.html">colorset</a></li>
            <li><a href="comment.html">comment</a></li>
            <li><a href="dropdowns.html">dropdowns</a></li>
            <li><a href="forms.html">forms</a></li>
            <li><a href="grid.html">grid</a></li>
            <li><a href="icons.html">icons</a></li>
            <li><a href="input-groups.html">input-groups</a></li>
            <li><a href="kindeditor.html">kindeditor</a></li>
            <li><a href="labels.html">labels</a></li>
            <li><a href="lightbox.html">Lightbox</a></li>
            <li><a href="list-group.html">list-group</a></li>
            <li><a href="list.html">list</a></li>
            <li><a href="modals.html">modals</a></li>
            <li><a href="navbars.html">navbars</a></li>
            <li><a href="navs.html">navs</a></li>
            <li><a href="pager.html">pager</a></li>
            <li><a href="panels.html">panels</a></li>
            <li><a href="popovers.html">popovers</a></li>
            <li><a href="progress.html">progress</a></li>
            <li><a href="tables.html">tables</a></li>
            <li><a href="tabs.html">tabs</a></li>
            <li><a href="textbox.html">textbox</a></li>
            <li><a href="tooltip.html">tooltip</a></li>
            <li><a href="type.html">type</a></li>
          </ul>
        </li>
        <li id="navbarNext"><a href="###">NEXT <i class="icon-angle-right icon-large"></i></a></li>
      </ul>
    </div>
  </nav>
<article>
  <section id='carousel' class="page-section">
    <h1>轮播</h1>
    <p>
      使用方法一：通过data属性可以很容易的控制轮播的定位。 <code>data-slide</code> 可以接受控制播放位置的
      <code>prev</code> 或 <code>next</code> 关键字。另外，还可以通过 <code>data-slide-to</code> 传递以 <code>0</code>
      开始的幻灯片下标。 <code>data-ride="carousel"</code> 属性用来标记在页面加载之后即开始启动的轮播组件。
    </p>
    <p>使用方法二：通过js手动启动轮播组件：<code>$('.carousel').carousel()</code></p>

    <h3>类型</h3>
    <h4>基本类型</h4>
    <div class='container'>
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="item active">
            <img alt="First slide" src="">
            <div class="carousel-caption">
              <h3>我是第一张幻灯片</h3>
              <p>天下熙熙皆为利来~</p>
            </div>
          </div>
          <div class="item">
            <img alt="Second slide" src="">
            <div class="carousel-caption">
              <h3>我是第二张幻灯片</h3>
              <p>天下攘攘皆为利往~</p>
            </div>
          </div>
          <div class="item">
            <img alt="Third slide" src="">
            <div class="carousel-caption">
              <h3>我是第三张幻灯片</h3>
              <p>最后一张咯~</p>
            </div>
          </div>
        </div>
        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
          <span class="glyphicon-chevron-left icon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
          <span class="glyphicon-chevron-right icon-chevron-right"></span>
        </a>
      </div>
    </div>

    <h3>变化</h3>
    <h4>选项</h4>
    <p>可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到<code>data-</code>之后，例如<code>data-interval=""</code>。</p>
    <div class="table-responsive">
      <table class="table table-bordered table-striped">
        <thead>
         <tr>
           <th style="width: 100px;">名称</th>
           <th style="width: 50px;">类型</th>
           <th style="width: 50px;">默认值</th>
           <th>描述</th>
         </tr>
        </thead>
        <tbody>
         <tr>
           <td>interval</td>
           <td>number</td>
           <td>5000</td>
           <td>幻灯片轮换的等待时间。如果为false，轮播将不会自动开始循环。</td>
         </tr>
         <tr>
           <td>pause</td>
           <td>string</td>
           <td>"hover"</td>
           <td>鼠标停留在幻灯片区域即暂停轮播，鼠标离开即启动轮播。</td>
         </tr>
         <tr>
           <td>wrap</td>
           <td>boolean</td>
           <td>true</td>
           <td>轮播是否持续循环。</td>
         </tr>
        </tbody>
      </table>
    </div><!-- /.table-responsive -->

    <h4>方法和事件</h4>
    <p>可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到<code>data-</code>之后，例如<code>data-interval=""</code>。</p>
    <div class="table-responsive">
      <table class="table table-bordered table-striped">
        <thead>
         <tr>
           <th style="width: 100px;">方法</th>
           <th>描述</th>
         </tr>
        </thead>
        <tbody>
         <tr>
           <td><code>.carousel(options)</code></td>
           <td>初始化轮播组件，接受一个可选的object类型的options参数，并开始幻灯片循环。</td>
         </tr>
         <tr>
           <td><code>.carousel('cycle')</code></td>
           <td>从左到右循环各帧。</td>
         </tr>
         <tr>
           <td><code>.carousel('pause')</code></td>
           <td>停止轮播。</td>
         </tr>
         <tr>
           <td><code>.carousel(number)</code></td>
           <td>将轮播定位到指定的帧上（帧下标以0开始，类似数组）。</td>
         </tr>
         <tr>
           <td><code>.carousel('pre')</code></td>
           <td>返回上一帧。</td>
         </tr>
         <tr>
           <td><code>.carousel('next')</code></td>
           <td>转到下一帧。</td>
         </tr>
        </tbody>
      </table>
    </div><!-- /.table-responsive -->

    <p>Bootstrap的轮播组件暴露了两个事件用于监听。</p>
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th style="width: 150px;">事件类型</th>
          <th>描述</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>slide.bs.carousel</td>
          <td>此事件在<code>slide</code>方法被调用之后立即出发。</td>
        </tr>
        <tr>
          <td>slid.bs.carousel</td>
          <td>当所有幻灯片播放完之后被触发。</td>
        </tr>
        <tr>
          <td colspan='2'>
            <code class="language-js">$('#myCarousel').on('slide.bs.carousel', function() {// do something…})</code>
          </td>
        </tr>
      </tbody>
    </table>

  </section>
</article>
</body>
</html>
